a
<template>
  <div class="app-container">
    <div slot="header" class="back">
      <router-link :to="{name: 'tools-list'}">
        <el-button plain icon="el-icon-back" size="small" :round="true">
          返回
        </el-button>
      </router-link>
    </div>
    <div class="container">
      <div class="container-content">
        <svg-icon icon-class="ads" style="font-size: 100px;height: 80px"></svg-icon>
        <div class="content">
          <div class="container_top">
            <span class="container_title">Google ads转化跟踪</span>
          </div>
          <div style="color:#7e849c;font-size:14px">转化跟踪可向您展示客户点击广告后发生的情况，例如完成购买或致电商家。了解如何通过跟踪执行行为（称为"转化"），帮助您获悉哪些广告、关键词和广告系列为您带来了业务。 </div>
        </div>
      </div>
    </div>
    <div class="content" style="margin-bottom: 20px">
<!--      <div v-if="googleAdsCode">-->
      <div v-if="isHasValue">
        <div class="content_e0ae">Google ads转化Id</div>
        <div class="account__value_8024"><span>{{googleConfig.googleConfig.conversionId}}</span><i class="el-icon-edit" style="margin-left:10px;cursor: pointer;" @click="handleEdit" ></i></div>
      </div>
      <div v-else>
        <div class="content_title">添加 Google Analytics 的跟踪代码</div>
        <div label="">
          <el-input v-model="googleConfig.googleConfig.conversionId" placeholder="输入转化Id" style="width: 320px;margin-right: 20px"></el-input>
          <el-button type="primary" @click="handleSubmit" >保存</el-button>
          <el-button  @click="isHasValue = true" v-if="googleConfig.googleConfig.conversionId">取消</el-button>
        </div>
      </div>
    </div>
    <!--    <el-form ref="form" :inline="true" :model="dataTracking" :rules="rules" size="small">
          <el-form-item label="" prop="bindValue">
            <el-input v-model="dataTracking.bindValue" placeholder="输入Pixel" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="dataTracking.seriesId" @change="setBindType" style="width: 260px">
              <el-option :value="null" label="全局"></el-option>
              <el-option
                  v-for="item in series"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="handleAddDataTracking">添加</el-button>
          </el-form-item>
        </el-form>-->

    <el-form ref="googleAdsForm" :model="googleConfig"  label-width="120px" v-if="isHasValue">
      <el-table :data="googleConfig.googleAdsDetailList" fit highlight-current-row>
        <el-table-column align="center" label="转化标签" width="400">
          <template slot-scope="scope">
            <el-form-item :prop="'googleAdsDetailList.' + scope.$index + '.conversionLabel'" :rules="[{require: true, trigger: 'blur'}]">
              <span v-if="!scope.row.canEdit">{{scope.row.conversionLabel}}</span>
              <span v-if="scope.row.canEdit"> <el-input style="width: 220px" v-model="scope.row.conversionLabel"></el-input></span>
              <i class="el-icon-edit" style="margin-left:10px;cursor: pointer;" @click="scope.row.canEdit = true" v-if="!scope.row.canEdit"></i>
              <i class="jyfont card-hd-baocun" style="margin-left:10px;cursor: pointer;" @click="handleEditLable(scope.row)" v-if="scope.row.canEdit && scope.row.conversionLabel"></i>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="转化跟踪状态">
          <template slot-scope="scope">
            {{scope.row.actionName}}
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import {addGoogleAds, googleAdsConfig, updateGoogleAds} from '@/api/app-market';

export default {
    name: 'google-ads',
    components: {},
    data () {
        return {
            submitLoading: false,
            isHasValue: false,
            googleConfig: {
                googleConfig: {
                    conversionId: ''
                }
            },
            googleAdsCode: ''
        };
    },
    methods: {
        handleEdit () {
            console.log(32445);
            this.isHasValue = false;
        },
        initConfigData () {
            googleAdsConfig(this.siteId).then(res => {
                const {data} = res;
                data.googleAdsDetailList.forEach(s => {
                    s.canEdit = !s.conversionLabel;
                });
                this.googleConfig = data;
                this.isHasValue = !!this.googleConfig.googleConfig.conversionId;
            });
        },
        handleSubmit () {
            addGoogleAds({...this.googleConfig.googleConfig, siteId: this.siteId}).then(res => {
                const {data} = res;
                console.log(data);
                this.initConfigData();
            });
        },
        handleEditLable (row) {
            console.log(row);
            updateGoogleAds(row.id, {...row, siteId: this.siteId}).then(res => {
                this.$message.success('更新成功');
                this.initConfigData();
            });
        }
    },
    mounted () {
        this.initConfigData();
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style lang="scss" scoped>
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

.container {
  padding: 0 0 0 40px;
  display: flex;
  justify-content: space-between;
}

.back {
  margin: 20px;
}

.container-content {
  display: flex;
  flex-direction: row;
}

.container-content img {
  height: 80px;
}

.container_top {
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  margin-left: 20px;
}

.container_title {
  font-size: 22px;
  color: #30344f;
  font-weight: 500;
}

.setting {
  padding: 0 15px;
  color: blue;
}

.footer {
  margin: 30px 0 40px 10px;
  padding: 0 0 0 5px;
  font-size: 14px;
  color: #666;
  line-height: 30px;
}
.content{
  display: flex;
  flex-direction: column;
  line-height: 30px;
  margin-left: 20px;
}
.content_title{
  margin:0;
  font-size:14px;
  padding: 30px 0 10px 0;
  color:#30354d
}
.content_e0ae{
  margin-bottom: 10px;
  color: #30354d;
  font-size: 14px;
  padding: 20px 0;
  margin: 15px 0 0 20px;
}
.account__value_8024 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 15px 20px;
}
</style>
